<!DOCTYPE html>
<html>
<head>
    <title>用户自定义地址去播放视频</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
    <div class="col-lg-12  clearfix-context">
        <div class="main-box no-header clearfix">
            <div class="main-box-body clearfix">
                <div id="my-video"><i class="fa fa fa-spinner fa-spin"></i> 正在加载...</div>
            </div>
        </div>
        <p></p>
        <div class="input-group">
            <input type="text" name="stream_address" id="stream_address" required autofocus  placeholder="输入媒体流地址，注意不要含有空格" class="form-control">
                    <span class="input-group-btn input-btn">
                        <button class="btn btn-default" id="form_button" type="button">提交</button>
                    </span>
        </div>
        <span id="msg" class="msg"></span>
        <div style="margin-top: 15px">
            <pre   style="background-color: #2B2B2B">
                <code class="language-html" data-lang="html" style="color:#fff">
                    <span style="color: #999">&lt;!-- 播放器需引入的 JavaScript 文件 --&gt;</span>
                    <span  style="color: #FFC557">&lt;script </span>type=<span style="color:#A5C261 ">"text/javascript"</span> src=<span style="color:#A5C261 ">"/lib/jwplayer/jwplayer.js"</span><span  style="color: #FFC557">&gt;&lt;/script&gt;</span>
                    <span  style="color: #FFC557">&lt;script </span>type=<span style="color:#A5C261 ">"text/javascript"</span><span  style="color: #FFC557">&gt;
                        <span  style="color:#fff">
                            <span style="color: #9876AA">jwplayer</span>(<span  style="color: #6A8759">"<span  style="color: #FFC557">my-video</span>"</span>).<span style="color: #FFC557">setup</span>({
                                <span style="color: #9876AA">file</span>: <span  style="color: #6A8759" id="stream_address_code">"/res/video/philippine_tarsier.mp4"</span><span style="color:#CC7832;">,</span> <span style="color: #999">//视频/直播 播放地址</span>
                                <span style="color: #9876AA">image</span>: <span  style="color: #6A8759">"/res/streaming/img/amai-logo-01.jpg"</span><span style="color:#CC7832;">,</span> <span style="color: #999">//播放前的 LOGO 图片地址</span>
                                <span style="color: #9876AA">width</span>: <span  style="color: #6A8759">"100%"</span><span style="color:#CC7832;">,</span> <span style="color: #999">//宽度</span>
                                <span style="color: #9876AA">height</span>: <span  style="color: #6A8759">"370"</span><span style="color:#CC7832;">,</span> <span style="color: #999">//高度</span>
                                <span style="color: #9876AA">hlshtml</span>:<span style="color:#CC7832;font-weight: 900">true,</span>
                                <span style="color: #9876AA">autostart</span>: <span style="color:#CC7832;font-weight: 900">false</span> <span style="color: #999">//自动播放</span>
                            });
                        </span>
                     &lt;/script&gt;</span>
                </code>
            </pre>
        </div>
    </div>
</div>
</div>
<script type="text/javascript" src="__PUBLIC__/lib/jwplayer/jwplayer.js"></script>
<script type="text/javascript">
    $(function(){
        var default_stream_address = "https://vodcdn.alicdn.com/oss/taobao-ugc/1dde6e764244406cbe5962b26eee078c/1476754829/video.mp4";
        jw_video(default_stream_address);

        $("#form_button").click(function () {
            var msg = $("#msg");
            var stream_address = $('input[name="stream_address"] ').val();
            if(stream_address == ""){
                $('#stream_address ').css("border","1px #ff0000 solid");
                msg.text("请输入媒体流地址");
                msg.addClass("warning");
                return false;
            } else{
                $('#stream_address ').css("border","1px #ccc solid");
                msg.text("");
                msg.removeClass("warning");
            }
            $('#stream_address_code ').html("\""+stream_address+"\"");
            jw_video(stream_address);
        });
    });

    function jw_video(url) {
        jwplayer("my-video").setup({
            file: url,
            image: "__PUBLIC__/Common/static/images/videodemo.png",
            width: "100%",//580
            height: "570",//370
            hlshtml:true,
            autostart: false //自动播放
        });
    }
</script>
</body>
</html>
